import './Order.scss';
import React from 'react';
import { connect } from 'react-redux';
import { getOrderData } from '../actions/orderAction';
import ScrollView from 'component/ScrollView/ScrollView.jsx';
import ListItem from './ListItem/ListItem';

class Order extends React.Component {
  constructor(props) {
    super(props);
    // 标示分页
    this.page = 0;
    // 是否还可以滚动加载
    this.state = {
      isend: false
    };
    this.changeColor = false
    this.fetchData(this.page);
    this.changeHeaderColor = this.changeHeaderColor.bind(this)
  }

  loadPage() {
    this.page++;
    if (this.page > 3) {
      this.setState({
        isend: true
      });
    } else {
      this.fetchData(this.page);
    }
  }

  fetchData(page) {
    this.props.dispatch(getOrderData(page));
  }
  renderList() {
    let list = this.props.list;

    return list.map((item, index) => {
      return <ListItem itemData={item} key={index}></ListItem>
    });
  }

  changeHeaderColor() {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > 100) {
      this.setState({
        changeColor: true
      })
    } else {
      this.setState({
        changeColor: false
      })
    }
  }

  componentDidMount() {
    window.addEventListener('scroll', this.changeHeaderColor)
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.changeHeaderColor)
  }
  render() {
    return (
      <div className="order">
        <div className={['header', this.state.changeColor ? 'hightColor' : null].join(' ')}>订单</div>
        <ScrollView dis="order" loadCallback={this.loadPage.bind(this)} isend={this.state.isend}>
          <div className="order-list">{this.renderList()}</div>
        </ScrollView>
      </div>
    );
  }
}
export default connect(
  state => ({
    list: state.orderReducer.list
  })
)(Order);